<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import { useLoginHelper } from '@/hooks/useLoginHelper';
import { buildAssetSource } from '@/utils';
import { maskIdCardRegExp } from '@/utils/mask.utils';
import { currRoute } from '@/utils/router.utils';

const loading = ref(false);

const { name, idno, birthDate, sex, address, ...query } = currRoute().query;

const { withBuildRedirectUrl } = useLoginHelper();

function handleReRecognize() {
  uni.reLaunch({
    url: withBuildRedirectUrl('/pages/login/medicalInsuranceLogin')
  });
}

function handleConfirm() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
    uni.reLaunch({
      url: query.redirectUrl || '/pages/index/index',
      fail: () => {
        uni.reLaunch({
          url: '/pages/index/index'
        });
      }
    });
  }, 1000);
}
</script>

<template>
  <view class="confirm flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto px-54 py-43">
      <view class="confirm-content py-70">
        <view class="confirm-content__cover m-auto flex-center">
          <image :src="buildAssetSource('login-confirm.png')" class="h-218 w-218" />
        </view>
        <view class="confirm-content__title text-center">
          医保信息确认
        </view>
        <view class="confirm-content__subtitle text-center">
          请确认您的身份信息是否正确
        </view>
        <view class="content-cell__group">
          <view class="content-cell">
            <view class="content-cell__title">
              姓名
            </view>
            <view class="content-cell__value">
              {{ name }}
            </view>
          </view>
          <view class="content-cell">
            <view class="content-cell__title">
              医保卡号
            </view>
            <view class="content-cell__value">
              {{ maskIdCardRegExp(idno) }}
            </view>
          </view>
          <view class="content-cell">
            <view class="content-cell__title">
              身份证号
            </view>
            <view class="content-cell__value">
              {{ maskIdCardRegExp(idno) }}
            </view>
          </view>
          <view class="content-cell">
            <view class="content-cell__title">
              医保类型
            </view>
            <view class="content-cell__value">
              居民医保
            </view>
          </view>
          <view class="content-cell">
            <view class="content-cell__title">
              参保状态
            </view>
            <view class="content-cell__value">
              <view class="state-tag">
                正常
              </view>
            </view>
          </view>
        </view>

        <view class="mt-40 px-51">
          <view class="medical-account">
            <view class="medical-account__title">
              医保账户余额
            </view>
            <view class="medical-account__cell mt-10 flex items-center justify-between">
              <view class="account-cell__title">
                关联信息
              </view>
              <view class="account-cell__value">
                682.00
              </view>
            </view>
          </view>
        </view>

        <view class="content-footer mt-45 flex px-160">
          <view class="action-btn flex-1">
            <wd-button block @click="handleReRecognize">
              重新识别
            </wd-button>
          </view>
          <view class="action-btn ml-30 flex-1">
            <wd-button block :loading="loading" @click="handleConfirm">
              确认登录
            </wd-button>
          </view>
        </view>
      </view>
      <view class="mt-50">
        <view class="login-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 使用提示
          </view>
          <view class="tips-content">
            <view>
              1.请将身份证芯片面朝上放置
            </view>
            <view class="mt-10">
              2.确保身份证平整，无遮挡
            </view>
            <view class="mt-10">
              3.扫描过程中请勿移动身份证
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户登录',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.confirm {
  height: 100%;
  background-color: var(--bg-color);

  .confirm-content {
    box-sizing: border-box;
    border: 2px solid #e6effd;
    background: linear-gradient(180deg, #fcfdff 0%, #f1f7ff 100%);
    border-radius: 40px;

    .confirm-content__cover {
      width: 218px;
      height: 218px;
      background: #edf4ff;
      border-radius: 50%;
    }

    .confirm-content__title {
      font-size: 60px;
      font-weight: bold;

      color: var(--text-color);
    }

    .confirm-content__subtitle {
      font-size: 28px;
      color: var(--secondary-text-color);
    }

    .content-cell__group {
      padding: 0 76px;
    }
    .content-cell {
      @apply flex items-center justify-between;
      border-bottom: 1px solid #c6dafa;
      padding-bottom: 32px;
      padding-top: 70px;

      .content-cell__title {
        font-size: 36px;
        color: var(--secondary-text-color);
      }
      .content-cell__value {
        color: var(--text-color);
        font-size: 36px;
        .state-tag {
          background: #dfecff;
          border-radius: 100px;
          color: var(--primary);
          font-size: 36px;
          padding: 4px 37px;
        }
      }
    }

    .medical-account {
      background: #e2edff;
      border-radius: 20px;
      padding: 40px 45px;
      .medical-account__title {
        color: #3d3d3d;
        font-size: 24px;
      }

      .medical-account__cell {
        color: var(--text-color);
        font-size: 42px;
        font-weight: 500;
      }
    }

    .content-footer {
      .action-btn {
        --wot-button-medium-height: 124px;
        --wot-button-medium-fs: 42px;
        --wot-button-medium-loading: 36px;

        :deep(.wd-button) {
          font-weight: bold;
        }
      }
    }
  }

  .login-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
